<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>哈哈互动科技</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <!-- 可选：针对iOS设备的特定设置 -->
    <meta name="apple-mobile-web-app-title" content="哈哈科技">

    <!-- 可选：针对Android设备的特定设置 -->
    <meta name="mobile-web-app-capable" content="yes">

    <!-- 可选：主题颜色（Android Chrome） -->
    <meta name="theme-color" content="#ffffff">

    <style>
        * {
            margin: 0;
            padding: 0;

        }

        .wrap {
            margin: 0 auto;
            max-width: 900px;
        }

        img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* 自定义样式 */
        input[type="text"],
        select {
            transition: border-color 0.3s ease;
        }
        input[type="text"]:focus,
        select:focus {
            border-color: #3b82f6;
            outline: none;
        }


    </style>

</head>
<body>

<div class="wrap">
    <!-- 插入图片，假设图片名为banner.jpg -->
    <img src="img/1.jpeg" alt="哈哈互动科技banner图">
    <div class="form bg-gray-100  flex items-center justify-center">

        <div class="bg-white p-6 rounded-lg shadow-md w-full max-w-md mt-2 mb-2">
            <h2 class="text-2xl font-bold mb-4 text-center">收货信息表单</h2>
            <form id="myForm">
                <div class="mb-4">
                    <label for="name" class="block text-sm font-medium text-gray-700">姓名：身份证一致(已加密)</label>
                    <input type="text" id="name" class="mt-1 block w-full border-gray-300 rounded-md py-2 px-3 shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                </div>
                <div class="mb-4">
                    <label for="phone" class="block text-sm font-medium text-gray-700">联系电话：收货电话(已加密)</label>
                    <input type="text" id="phone" class="mt-1 block w-full border-gray-300 rounded-md py-2 px-3 shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                </div>
                <div class="mb-4">
                    <label for="id-card" class="block text-sm font-medium text-gray-700">身份证：输入身份证(已加密)</label>
                    <input type="text" id="id-card" class="mt-1 block w-full border-gray-300 rounded-md py-2 px-3 shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                </div>

                <div class="mb-4">
                    <label for="address" class="block text-sm font-medium text-gray-700">详细地址：省/市/区/街道/楼牌号等(已加密)</label>
                    <input type="text" id="address" class="mt-1 block w-full border-gray-300 rounded-md py-2 px-3 shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                </div>
                <div class="mb-4">
                    <input type="checkbox" id="agreement" class="mr-2">
                    <label for="agreement" class="text-sm text-gray-700">提交即视为阅读并同意《中国联通客户入网服务协议》、《中国联通用户隐私政策》、《中国联通儿童个人信息保护政策及监护人须知》、《关于客户个人信息收集、使用规则的公告》、《实名制流程》及资费规则。</label>
                </div>
                <div class="flex justify-center">
                    <button type="button" onclick="validateForm()" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md transition-colors duration-300">立即申请 包邮到家</button>
                </div>
            </form>
        </div>

    </div>
    <img src="img/2.jpeg" alt="哈哈互动科技banner图">
    <img src="img/3.jpeg" alt="哈哈互动科技banner图">
    <img src="img/3.jpeg" alt="哈哈互动科技banner图">
</div>
<script>
    function validateForm() {
        const name = document.getElementById('name').value;
        const phone = document.getElementById('phone').value;
        const idCard = document.getElementById('id-card').value;
        const address = document.getElementById('address').value;
        const agreement = document.getElementById('agreement').checked;

        if (!name || !phone || !idCard || !address || !agreement) {
            alert('请填写所有信息！');
            return false;
        }
        // 若所有信息都已填写，则提交表单
        alert('提交成功！');
    }
</script>
</body>
</html>
